<template>
    <a-form @submit.prevent="handleSubmit" class="tw-p-4 tw-bg-white tw-rounded tw-shadow-md">
      <a-form-item label="国家/地区" class="tw-mb-4">
        <a-select v-model="form.country" placeholder="请选择国家/地区" class="tw-w-full">
          <a-select-option value="美国">美国</a-select-option>
          <!-- 可以添加更多国家/地区 -->
        </a-select>
      </a-form-item>
  
      <a-form-item label="名字" class="tw-mb-4">
        <a-input v-model="form.firstName" placeholder="请输入名字" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item label="姓氏" class="tw-mb-4">
        <a-input v-model="form.lastName" placeholder="请输入姓氏" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item label="公司" class="tw-mb-4">
        <a-input v-model="form.company" placeholder="请输入公司" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item label="地址" class="tw-mb-4">
        <a-input v-model="form.address" placeholder="请输入地址" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item label="城市" class="tw-mb-4">
        <a-input v-model="form.city" placeholder="请输入城市" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item label="州" class="tw-mb-4">
        <a-select v-model="form.state" placeholder="请选择州" class="tw-w-full">
          <a-select-option value="新墨西哥州">新墨西哥州</a-select-option>
          <!-- 可以添加更多州 -->
        </a-select>
      </a-form-item>
  
      <a-form-item label="邮政编码" class="tw-mb-4">
        <a-input v-model="form.zipCode" placeholder="请输入邮政编码" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item label="电话号码" class="tw-mb-4">
        <a-input v-model="form.phone" placeholder="请输入电话号码" class="tw-w-full" />
      </a-form-item>
  
      <a-form-item>
        <a-button type="primary" html-type="submit" class="tw-mr-2">保存</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </a-form-item>
    </a-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          country: '美国',
          firstName: '',
          lastName: '',
          company: '',
          address: '',
          city: '',
          state: '新墨西哥州',
          zipCode: '',
          phone: '',
        },
      };
    },
    methods: {
      handleSubmit() {
        console.log('提交的表单数据:', this.form);
        // 处理表单提交逻辑
      },
      handleCancel() {
        // 处理取消逻辑
        this.$message.info('已取消');
      },
    },
  };
  </script>
  
  <style scoped>
  /* 可以添加样式 */
  </style>